<template>
    <div>
        <a-modal
            :title="(form.id?'编辑':'新增')+(currentRow.fsqlx=='无单位派车'?'无单位派车':(currentRow.fsqlx=='超期产生'?'超期产生额外费用报销填报':
            (currentRow.fsqlx=='午休房'?'午休房报销填报':currentRow.fsqlx=='超期产生和午休房'?'超期产生额外费用报销填报和午休房报销填报':'')))"
            :visible="visible"
            :maskClosable="false"
            @ok="handleOk"
            @cancel="handleCancel"
            :dialog-style="{ top: '40px' }"
            :width="900"
            okText="保存并关闭"

        >
        <!-- cancelText="关闭" -->
            <template slot="footer">
                <div>
                    <a-button @click="handleCancel" style="margin-right: 10px;">关闭</a-button>
                    <a-button v-if="currentRow.fsqlx && !currentRow.isView" @click="handleSave" class="blue-btn">保存</a-button>
                    <a-button :loading="loading" v-if="currentRow.fsqlx && !currentRow.isView" @click="handleOk" type='primary'>发起流程</a-button>
                </div>
            </template>
            <div v-if="!currentRow.fsqlx" style="text-align: center;">
                <a-button style="width: 298px;" type="primary" class="blue-btn" @click="addSpecialReimburse('超期产生')">超期产生额外费用报销填报</a-button>
                <div style="height: 15px;"/>
                <a-button style="width: 298px;" type="primary" class="blue-btn" @click="addSpecialReimburse('午休房')">午休房报销填报</a-button>
                <div style="height: 15px;"/>
                <a-button style="width: 298px;" type="primary" class="blue-btn" @click="addSpecialReimburse('超期产生和午休房')">超期产生额外费用报销填报和午休房报销填报</a-button>
            </div>
            <div v-else class="add-edit-special-box">
                <a-collapse v-model="activeKey" style="width: 100%;">
                    <a-collapse-panel key="1" header="审评内容" >
                        <a-form-model
                            class="form-model-big-box form-model-big-box1 additionalReimbursement-randomId1-form"
                            ref="ruleForm1"
                            :model="form"
                            :rules="rules"
                            layout="inline"
                        >
                            <a-form-model-item ref="fsqrq" label="申请科室" prop="fsqrq">
                                <span style="line-height: 22px;display: inline-block;width: 180.4px;">{{ currentRow.fjbks }}</span>
                            </a-form-model-item>
                            <a-form-model-item ref="fsqrq" label="申请人" prop="fsqrq">
                                <span style="line-height: 22px;display: inline-block;">{{ currentRow.fjbr }}</span>
                            </a-form-model-item>
                            <a-form-model-item ref="fsqrq" label="项目内容" prop="fsqrq" class="form-item-flex-1">
                                <span style="line-height: 22px;display: inline-block;">{{ currentRow.fxmnr }}</span>
                            </a-form-model-item>
                            <a-form-model-item ref="fsqrq" label="项目时间" prop="fsqrq" class="form-item-flex-1">
                                <span style="line-height: 22px;display: inline-block;">{{ currentRow.fxmsj }}</span>
                            </a-form-model-item>
                            <a-form-model-item ref="fsqrq" label="申请日期" prop="fsqrq">
                                <span v-if="currentRow.isView">{{ moment(form.fsqrq).format('YYYY-MM-DD') }}</span>
                                <a-date-picker v-else v-model="form.fsqrq" placeholder="请选择申请日期" />
                            </a-form-model-item>
                            <a-form-model-item v-if="currentRow.fsqlx!=='无单位派车'" label="特殊情况申请天数" prop="fsqts">
                                <span v-if="currentRow.isView">{{ form.fsqts }}</span>
                                <a-input-number
                                    v-else
                                    style="width: 180px;"
                                    placeholder="请输入特殊情况申请天数"
                                    v-model="form.fsqts"
                                    :min="0" :precision="0" />
                            </a-form-model-item>
                            <!-- label="金额" -->
                            <a-form-model-item v-if="currentRow.fsqlx!=='无单位派车'"  prop="fsqje" class="form-item-flex-1">
                                <template slot="label">
                                    <div style="width: 64px;display: flex;justify-content: space-between;">
                                        <span>金</span>
                                        <span>额</span>
                                    </div>
                                </template>
                                <span v-if="currentRow.isView">{{ form.fsqje }}</span>
                                <a-input-number
                                    v-else
                                    style="width: 180px;"
                                    placeholder="请输入金额"
                                    v-model="form.fsqje"
                                    :min="0" :precision="2" />
                            </a-form-model-item>
                        </a-form-model>
                    </a-collapse-panel>
                    <a-collapse-panel key="2" header="超期产生额外费用报销填报" class="collapse-panel-head-l380"
                    v-if="currentRow.fsqlx=='超期产生' || currentRow.fsqlx=='超期产生和午休房'">
                        <a-form-model
                            class="form-model-big-box form-model-big-box1 additionalReimbursement-randomId1-form"
                            ref="ruleForm2"
                            :model="form"
                            :rules="rules"
                            layout="inline"
                        >
                            <a-form-model-item ref="fewfybxsm" label="特殊情况说明" prop="fewfybxsm" class="form-item-flex-1">
                                <span v-if="currentRow.isView">{{ form.fewfybxsm }}</span>
                                <a-textarea
                                    v-else
                                    style="width: 100%;"
                                    v-model="form.fewfybxsm"
                                    :autosize="{ minRows: 2, maxRows: 10000 }"
                                    placeholder="请输入特殊情况说明"
                                ></a-textarea>
                            </a-form-model-item>
                            <a-form-model-item label="申请人签字确认" prop="fewfybxsqrxm" class="form-item-flex-1">
                                <!-- fewfybxsqrid -->
                                <div style="display: flex;align-items: center;margin-top: 5px;">
                                    <span v-if="currentRow.isView">{{ form.fewfybxsqrxm }}</span>
                                    <a-textarea
                                        v-else
                                        :readOnly="true"
                                        style="flex: 1;"
                                        v-model="form.fewfybxsqrxm"
                                        :autosize="{ minRows: 1, maxRows: 10000 }"
                                        placeholder="申请人签字确认"
                                    ></a-textarea>
                                    <a-button v-if="!currentRow.isView" class="blue-btn" style="margin-left: 10px;" type="primary" @click="overdueReimbursementClick()">选择申请人</a-button>
                                </div>
                            </a-form-model-item>
                        </a-form-model>
                    </a-collapse-panel>
                    <a-collapse-panel key="3" header="午休房报销填报" v-if="currentRow.fsqlx=='午休房' || currentRow.fsqlx=='超期产生和午休房'">
                        <a-form-model
                            class="form-model-big-box form-model-big-box1 additionalReimbursement-randomId1-form"
                            ref="ruleForm3"
                            :model="form"
                            :rules="rules"
                            layout="inline"
                        >
                            <a-form-model-item ref="fwxfbxxmdz" label="项目地址" prop="fwxfbxxmdz" class="form-item-flex-1">
                                <span v-if="currentRow.isView">{{ form.fwxfbxxmdz }}</span>
                                <a-textarea
                                    v-else
                                    style="width: 100%;"
                                    v-model="form.fwxfbxxmdz"
                                    :autosize="{ minRows: 2, maxRows: 10000 }"
                                    placeholder="请输入项目地址"
                                ></a-textarea>
                            </a-form-model-item>
                            <a-form-model-item ref="fwxfbxgzdz" label="工作地址" prop="fwxfbxgzdz" class="form-item-flex-1">
                                <span v-if="currentRow.isView">{{ form.fwxfbxgzdz }}</span>
                                <a-textarea
                                    v-else
                                    style="width: 100%;"
                                    v-model="form.fwxfbxgzdz"
                                    :autosize="{ minRows: 2, maxRows: 10000 }"
                                    placeholder="请输入工作地址"
                                ></a-textarea>
                            </a-form-model-item>
                            <a-form-model-item label="申请人签字确认" prop="fwxfsqrxm" class="form-item-flex-1">
                                <!-- fwxfsqrid -->
                                <div style="display: flex;align-items: center;margin-top: 5px;">
                                    <span v-if="currentRow.isView">{{ form.fwxfsqrxm }}</span>
                                    <a-textarea
                                        v-else
                                        :readOnly="true"
                                        style="flex: 1;"
                                        v-model="form.fwxfsqrxm"
                                        :autosize="{ minRows: 1, maxRows: 10000 }"
                                        placeholder="申请人签字确认"
                                    ></a-textarea>
                                    <a-button v-if="!currentRow.isView" class="blue-btn" style="margin-left: 10px;" type="primary" @click="noonBreakClick()">选择申请人</a-button>
                                </div>
                            </a-form-model-item>
                        </a-form-model>
                    </a-collapse-panel>
                    <a-collapse-panel key="4" header="无单位派车填报" v-if="currentRow.fsqlx=='无单位派车'">
                        <a-form-model
                            class="form-model-big-box form-model-big-box1 additionalReimbursement-randomId1-form"
                            ref="ruleForm4"
                            :model="form"
                            :rules="rules"
                            layout="inline"
                        >
                            <a-form-model-item ref="fewfybxsm" label="无单位派车填报说明" prop="fewfybxsm" class="form-item-flex-1">
                                <span v-if="currentRow.isView">{{ form.fewfybxsm }}</span>
                                <a-textarea
                                    v-else
                                    style="width: 100%;"
                                    v-model="form.fewfybxsm"
                                    :autosize="{ minRows: 2, maxRows: 10000 }"
                                    placeholder="请输入无城市间交通费/无住宿说明"
                                ></a-textarea>
                            </a-form-model-item>
                            <a-form-model-item label="申请人签字确认" prop="fewfybxsqrxm" class="form-item-flex-1">
                                <!-- fwxfsqrid -->
                                <div style="display: flex;align-items: center;margin-top: 5px;">
                                    <span v-if="currentRow.isView">{{ form.fewfybxsqrxm }}</span>
                                    <a-textarea
                                        v-else
                                        :readOnly="true"
                                        style="flex: 1;"
                                        v-model="form.fewfybxsqrxm"
                                        :autosize="{ minRows: 1, maxRows: 10000 }"
                                        placeholder="申请人签字确认"
                                    ></a-textarea>
                                    <a-button v-if="!currentRow.isView" class="blue-btn" style="margin-left: 10px;" type="primary" @click="overdueReimbursementClick()">选择申请人</a-button>
                                </div>
                            </a-form-model-item>
                        </a-form-model>
                    </a-collapse-panel>
                    <a-collapse-panel key="5" header="附件上传" >
                        <uploadFilesList
                            v-if="visible"
                            :config="uploadFilesListConfig"
                            :filesFormState="{...uploadFilesForm}"/>
                    </a-collapse-panel>
                </a-collapse>
            </div>
            <selectApplicant ref="selectApplicantRef" @getApplicantData="getApplicantData"/>
        </a-modal>
    </div>
</template>
<script>
import { jcyfybxdaddFybxdTssxSq,jcyfybxdupdateFybxdTssxSq,jcyfybxddeleteFybxdTssxSq,tssqsqinitBzFlow } from './service/index'
import assessCheckApi from './service/api.js'
import moment from 'moment'
import selectApplicant from './selectApplicant.vue'
import uploadFilesList from '@/views/administrativeOffice-new/modal/uploadFilesList'
export default {
    components:{
        selectApplicant,
        uploadFilesList,
    },
    props:{

    },
    data(){
        return{
            moment:moment,
            currentRow:{},
            visible:false,
            activeKey:['1','2','3','4','5'],
            randomId1:'formModel1'+new Date().getTime(),
            randomId2:'formModel2'+new Date().getTime(),
            randomId3:'formModel3'+new Date().getTime(),
            randomId4:'formModel3'+new Date().getTime(),
            form:{},
            rules:{
                fsqrq: [{ type: 'object',required: true, message: '请选择申请日期', trigger: 'change' }],
                fsqts: [{ type: 'number',required: true, message: '请输入特殊情况申请天数', trigger: 'blur' }],
                fsqje: [{ type: 'number',required: true, message: '请输入金额', trigger: 'blur' }],
                fewfybxsm: [{ required: true, message: '请输入特殊情况说明', trigger: 'blur' }],
                fewfybxsqrxm: [{ required: true, message: '申请人签字确认', trigger: 'blur' }],
                fwxfbxxmdz: [{ required: true, message: '请输入项目地址', trigger: 'blur' }],
                fwxfbxgzdz: [{ required: true, message: '请输入工作地址', trigger: 'blur' }],
                fewfybxsm: [{ required: true, message: '请输入无城市间交通费/无住宿说明', trigger: 'blur' }],
                fwxfsqrxm: [{ required: true, message: '申请人签字确认', trigger: 'blur' }],
            },
            loading: false,
            uploadFilesForm: {},
            uploadFilesListConfig: {
                isUpload: false,
                fjAddApi: assessCheckApi.jcyfybxdaddFybxdTssxSq,
            },
        }
    },
    watch:{

    },
    mounted(){

    },
    methods:{
        getData(row,val){
            this.currentRow = row
            val = {
                ...val,
                fsqrq:val.fsqrq?moment(val.fsqrq):moment(),
                fsqts:val.fsqts?Number(val.fsqts):0,
                fsqje:val.fsqje?Number(val.fsqje):0
            }
            this.form = val
            this.uploadFilesForm = {
                ...this.currentRow,
                ...this.form,
                fsqrq:moment(this.form.fsqrq).format('YYYY-MM-DD'),
                fsffqlc: '否',
                fsqzt: '已申请',
                fsfjcysq: '否',
                id: this.form.id?this.form.id:''
            }
            this.uploadFilesListConfig.isUpload = this.currentRow.isView?false:true
        },
        addSpecialReimburse(val){
            //console.log(val)
            this.getData({...this.currentRow,fsqlx:val},{})
        },
        overdueReimbursementClick(){
                this.$refs.selectApplicantRef.getData({...this.currentRow,idArr:this.form.fewfybxsqrid?this.form.fewfybxsqrid.split(','):[],val:1})
                this.$refs.selectApplicantRef.visible = true

        },
        noonBreakClick(){
            this.$refs.selectApplicantRef.getData({...this.currentRow,idArr:this.form.fwxfsqrid?this.form.fwxfsqrid.split(','):[],val:2})
            this.$refs.selectApplicantRef.visible = true

        },
        getApplicantData(row){
            //console.log(row)
            if(row.val == 1){
                this.form = {
                    ...this.form,
                    fewfybxsqrid:row.id,
                    fewfybxsqrxm:row.name,
                }
            }else{
                this.form = {
                    ...this.form,
                    fwxfsqrid:row.id,
                    fwxfsqrxm:row.name,
                }
            }
            //console.log(this.form)
        },
        handleSave(){
            let data = {
                ...this.currentRow,
                ...this.form,
                fsqrq:moment(this.form.fsqrq).format('YYYY-MM-DD'),
                fsffqlc: '否',
                fsqzt: '已申请',
                fsfjcysq: '否',
                id: this.form.id?this.form.id:''
            }
            if(this.form.id){
                jcyfybxdupdateFybxdTssxSq(data).then(res=>{
                    if(res.code == 200){
                        // this.$emit('newSpecialData')
                        this.$message.success(res.message)
                    }else{
                        this.$message.warning(res.message)
                    }
                })
            }else{
                jcyfybxdaddFybxdTssxSq(data).then(res=>{
                    if(res.code == 200){
                        this.$emit('newSpecialData')
                        this.$message.success(res.message)
                    }else{
                        this.$message.warning(res.message)
                    }
                })
            }
        },
        handleOk(){
            let ruleForm1Validate = false
            let ruleForm2Validate = false
            let ruleForm3Validate = false
            this.$refs.ruleForm1.validate(valid => {
                if (valid) {
                    ruleForm1Validate = true
                } else {
                    return false;
                }
            });
            if(this.$refs.ruleForm2){
                this.$refs.ruleForm2.validate(valid => {
                    if (valid) {
                        ruleForm2Validate = true
                    } else {
                        return false;
                    }
                });
            }else{
                ruleForm2Validate = true
            }
            if(this.$refs.ruleForm3){
                this.$refs.ruleForm3.validate(valid => {
                    if (valid) {
                        ruleForm3Validate = true
                    } else {
                        return false;
                    }
                });
            }else{
                ruleForm3Validate = true
            }

            if(ruleForm1Validate && ruleForm2Validate && ruleForm3Validate){
                this.submitClick()
            }
        },
        submitClick(){
            let that = this
            that.$confirm({
                title:'您确认要发起流程吗？',
                onOk() {
                    that.loading = true
                    let data = {
                        ...that.currentRow,
                        ...that.form,
                        fsqrq:moment(that.form.fsqrq).format('YYYY-MM-DD'),
                        fsffqlc: '是',
                        fsqzt: '已申请',
                        fsfjcysq: '是',
                        id: that.form.id?that.form.id:''
                    }
                    // if(that.form.id){
                    //     jcyfybxdupdateFybxdTssxSq(data).then(res=>{
                    //         if(res.code == 200){
                    //             that.$emit('successSpecialData')
                    //             that.visible = false
                    //             that.$message.success(res.message)
                    //         }else{
                    //             that.$message.warning(res.message)
                    //         }
                    //     })
                    // }else{
                    //     jcyfybxdaddFybxdTssxSq(data).then(res=>{
                    //         if(res.code == 200){
                    //             that.$emit('successSpecialData')
                    //             that.visible = false
                    //             that.$message.success(res.message)
                    //         }else{
                    //             that.$message.warning(res.message)
                    //         }
                    //     })
                    // }
                    tssqsqinitBzFlow(data).then(res=>{
                        if(res.code == 200){
                            that.$emit('updataFsfytssxsq')
                            that.visible = false
                            that.$message.success(res.message)
                        }else{
                            that.$message.warning(res.message)
                        }
                        that.loading = false
                    })
                }
            })
        },
        handleCancel(){
            this.visible = false
        },

    }
}
</script>
<style lang="less">
.add-edit-special-box{
    display: flex;
    flex-wrap: wrap;
    .ant-form-item{
        // display: flex;
        // align-items: center;
    }
    .toolbox-form-item{
        width: 50%;
        // padding: 3px;
    }
    .ant-form-item-with-help{
        margin-bottom: 10px;
    }
    .form-model-big-box{
        .form-item-flex-1{
            display: flex;
            .ant-form-item-control-wrapper{
                flex: 1;

            }
        }
        .ant-form-item-control-wrapper{
            font-family:仿宋_GB2312 !important;
            font-size: 16px;
            .ant-checkbox-group{
                height: 40px;
                line-height: 40px;
            }
        }
    }
    .form-model-big-box1{
        .ant-form-item-label{

            margin: 4px 3px;
            label{
                padding-left: 3px;
                background: #e6f7ff;
            }

        }
    }
    .ant-form-inline .ant-form-item > .ant-form-item-label{
        vertical-align: middle !important;
    }
    .additionalReimbursement-randomId1-form{
        .ant-form-item-label{
            label{
                width:180px;
                display: flex;
                align-items: center;
                justify-content: flex-end;
                font-weight: 600;
                height: 32px;
                font-size: 16px;
                font-family:simHei;
            }
        }
    }
}
</style>
